window.onload = function ()  //当整个HTML页面加载完毕时 进行该表达式
{
	let add = document.getElementById("add"); //元素定位
	const button_add = document.getElementById("button_add"); //元素定位到按钮
	let produck = document.getElementsByClassName("produck");  // 获取class名为produck的元素
	let form_up = document.getElementById("form_up");  //获取表单 
	let shopin = document.getElementById("shopin");//购物的inner HTML
	let count = 0; //计算总价格
	let summary = [];//创建一个数组来接收所有的商品名称。
	
	/**这些内容还没了解**/
	/*获取索引下标*这块代码已经没用 但然仍然保留 因有启发作用 及未深刻理解 */
	// Array.prototype.indexOf = function(val) { 
	// for (var i = 0; i < this.length; i++) { 
	// if (this[i] == val) return i; 
	// } 
	// return -1; 
	// };
	
	/*对下标进行操作*/
	// Array.prototype.remove = function(val) { 
	// var index = this.indexOf(val); 
	// if (index > -1) { 
	// this.splice(index, 1); 
	// } 
	// };
	/**END**/
	/*数组去重*/
	function uniq(array)
	{
		let temp = []; //首先创建一个新数组
		for(let i = 0 ; i < array.length; i++)
		{
			if(temp.indexOf(array[i]) == -1) //遍历数组中的值,如果那个值不存在的话会返回-1,如果那个值已经有索引下标的话，我们则不需要把它再添加进来;
			{
				temp.push(array[i]); //新数组不存遍历中的那个值 我们就把它 push进去
			}
		}
		return temp;
	}
	/*数组去重end*/
	
	
	/*自己写的函数* 首先找到与值相对应的索引，然后再根据索引去操作删除数组 */
	function delete1(name) //传入你想要查找的数值 还可以在函数多写一个传入数组名字的入口
	{
	 for(let i = 0 ; i < summary.length;i ++)  //遍历数组寻找数值 
	 {
	  if(summary[i] == name) //寻找数值，如果数组匹配
	  {
	     return summary.splice(i,1); //则返回当前的索引并且对数组的下标进行操作，把数组当前下标对应的值删除。
	  }
	 }			
	}
	
	/*自己写的函数end*/
	
	//let StrProduct = ""; //创建一个空字符串 / 全局字符串有字符遗留问题被暂时取消 全局字符串被正式取消,此条注释留作纪念。
	for(let i = 0 ; i < produck.length; i++) //遍历produck
	{
		produck[i].onclick = function ()  //为每个produck加上鼠标单击事件
		{
			let click_string = '';
			let array_uniq;
			if(produck[i].checked) //判断鼠标是否勾选了当前的元素
			{
				count+=Number(produck[i].value); //获取当前勾选元素的值 并与初始化的值相加
				add.innerText = count; //在价格显示出显示价格
				console.log(`你选选择的商品为：${produck[i].name}`);
				summary.push(produck[i].name);
				array_uniq = uniq(summary);
				for(let i = 0; i < array_uniq.length; i++)
				{
					click_string += array_uniq[i]+",";
				}
				shopin.innerHTML = `${click_string}`;
				
			}
			else
			{
				count-=Number(produck[i].value); //如果取消勾选则减去当前的价格
				add.innerText = count; //在显示价格处显示当前价格
				// summary.remove(produck[i].name);
				delete1(produck[i].name);
				console.log(`你已经取消的商品：${produck[i].name}`);
				array_uniq = uniq(summary);
				for(let i = 0; i < array_uniq.length; i++)
				{
					click_string += array_uniq[i]+",";
				}
				shopin.innerHTML = `${click_string}`;
				
			}
		}
	}
	
	
	button_add.onclick = function ()  //为提交价格按钮添加鼠标单击事件
	{
		if(count != 0)  //判断当前的提交总价格是否不等于0
		{
			let StrProduct = "";
			for(let i = 0 ; i < summary.length; i++)
			{
				 StrProduct += summary[i] + "-";
			}
			
			if(confirm(`选中商品的总价格为${count}元,商品有${StrProduct}确定提交吗？`)) //添加一个确认按钮 如果确认则返回true
			{
				
				let div_wrapper = document.createElement("div");
				let div = document.createElement("div");
				div.style.width = "320px";
				div.style.height = "400px";
				div.innerHTML = `<img src='./images/支付宝.jpg' width = "320" height = "400">`;
				div.style.position = "absolute";
				div.style.left = "40%";
				div.style.top = "30%";
				document.body.appendChild(div);
				
			}
			else
			{
			
				alert("你已取消订单");
			    console.log(StrProduct);
				console.log(summary);
			}
		}
		else //如果选择的商品价格为0则不能提交
		{
			alert("你貌似没有选择商品");
		}
	}
	/*清空和全选按钮的js*/
	let empty = document.getElementById("empty");
	let allCheckbox = document.getElementById("allCheckbox");
	let clickNumber = 0;
	empty.addEventListener("click",()=>{
		for(let i = 0; i < produck.length; i++)
		{
			produck[i].checked = false;
		}
		summary = [];
		count = 0;
		add.innerText = count;
		shopin.innerHTML = "";
		clickNumber = 0;
	});
	
	allCheckbox.addEventListener('click',()=>{
		
		if(clickNumber < 1)
		{
			for(let i = 0; i < produck.length; i++)
			{
				produck[i].checked = true;
				summary.push(produck[i].name);
				count += Number(produck[i].value);
			}
			
			add.innerText = count;
			shopin.innerHTML = summary.join("-").toString();
		}
		clickNumber ++;
		
	});
	
	
	
	
}
	
